<!-- 推广页面 -->
<template>
	<view>
		<view class="overall">
			<!-- 我的用户与佣金部分 start -->
			<view class="mine-coin">
				<view class="mine">
					<text>我的用户</text>
					<text class="namber"><text class="namber-one">{{count}}</text>个</text>
				</view>
				<view class="mine">
					<text>已赚佣金</text>
					<text class="coin">{{inv_money}}<text class="coin-one">元</text></text>
				</view>
			</view>
			<!-- 我的用户与佣金部分 end -->
			<view class="hr"></view>
			<!-- 切换 start -->
			<view class="comm-tabs">
				<view @click="invite_one" :class="switc==true ? 'invite':'invite_two'">
					邀请链接
					<view class="color" v-show="switc==true"></view>
				</view>
				<view @click="invite_two" :class="switc==false ? 'invite':'invite_two'">
					返佣记录
					<view class="color" v-show="switc==false"></view>
				</view>
			</view>
			<!-- 切换 end -->
			<!-- 邀请码 start -->
			<view class="invite-code">
				您的注册邀请码为：<text>{{inv_code}}</text>
			</view>
			<view class="code">
				<text>推广二维码</text>
				<image src="../../static/publicizeicon/getqrcode.jpg" class="code-icon"></image>
				<text>只需三步即可获得佣金</text>
			</view>
			<view class="illustrate">
				<view class="text">
					邀请好友注册并填写邀请码
				</view>
				<view class="text">
					被邀请人成功买入
				</view>
				<view class="text">
					获得佣金
				</view>
			</view>
			<!-- 邀请码 end -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switc:true,
				count:'',
				inv_code:'',
				inv_money:''
			};
		},
		methods:{
			invite_one(){
				this.switc=true
			},
			invite_two(){
				this.switc=false
			}
		},
		onLoad() {
			let requset ='http://6e9736d2.r3.cpolar.cn'
			let id =uni.getStorageSync('id');
			uni.request({
				url:requset+'/api/user/promotion?id=119',
				method:'GET',
				success: (res) => {
					console.log(res.data.data);
					this.count =res.data.data.count;
					this.inv_code =res.data.data.inv_code;
					this.inv_money =res.data.data.inv_money;
					
				}
			})
		}
	}
</script>

<style lang="scss">
	.overall{
		width: 100%;
	}
	.hr{
		width: 100%;
		height: 0.625rem;
		background-color: rgb(242, 242, 242);
	}
//我的用户与佣金部分样式 start
.mine-coin{
	width: 100%;
	height: 5.61rem;
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
}
.mine{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 0.88rem;
}
.coin{
	margin-top: .3rem;
	color: #ff4c3e !important;
	font-size: 1.2rem;
}
.namber{
	margin-top: .3rem;
	color: #ffc107 !important;
	font-size: 1rem;
}
.namber-one{
	font-size: 1.2rem;
}
.coin-one{
	font-size: 1rem;
}
// 我的用户与佣金部分样式 end
//切换部分样式 start
.comm-tabs{
	width: 100%;
	height: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}
.invite{
	width: 50%;
	height: 100%;
	line-height: 2.5rem;
	text-align: center;
	position: relative;
	color: red;
	font-size: 1rem;
}
.invite_two{
	width: 50%;
	height: 100%;
	line-height: 2.5rem;
	text-align: center;
	position: relative;
	font-size: 1rem;
}
.color{
	width: 1.25rem;
	height: 0.25rem;
	background-color: red;
	border-radius: 0.31rem;
	position: absolute;
	top: 2.3rem;
	left: 5.2rem;
}
//切换部分样式 end
//邀请码样式 start
.invite-code{
	width: 22.187rem;
	height: 3.125rem;
	margin: 0rem auto;
	padding-left: 0.9375rem;
	margin-top: 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #f2f2f2;
	background-color: #fff;
	font-size: 1rem;
}
.code{
	width: 22.187rem;
	height: 16.1875rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	margin: 0rem auto;
}
.code>image{
	width: 11.1rem;
	height: 11.1rem;
}
.code>text:nth-child(1){
	margin-bottom: .9rem;
	font-size: 0.9rem !important;
}
.code>text:nth-child(3){
	color: #d76a72;
	font-size: 0.6rem !important;
}
.illustrate{
	width: 22.187rem;
	height: 5.125rem;
	margin: 0rem auto;
	display: flex;
}
.text{
	width: 7.375rem;
	height: 100%;
	color: #282828;
	font-size: 0.86rem !important;
	display: flex;
	justify-content: center;
	padding: 1.25rem 0rem;
	text-align: center;
	box-sizing: border-box;
}
.illustrate .text:nth-child(2){
	border-right: 1px solid #f2f2f2;;
}
//邀请码样式 end
</style>
